<template>
  <div class="pay-wrap">
    <!-- 支付状态 -->
    <div class="pay-state">
      <div>
        <span v-if="carInfo.payAmount === null">待支付</span>
        <span v-else>支付成功</span>
      </div>
    </div>
    <!-- 车辆信息 -->
    <div class="pay-text">
      <p class="clearfix">
        <span>号牌号码：</span>
        <span>{{carInfo.carNum}}</span>
      </p>

      <p class="clearfix" v-if="carInfo.payAmount === null">
        <span>检测费用：</span>
        <span>{{carInfo.orderAmount}}元</span>
      </p>
      <p class="clearfix" v-else>
        <span style="margin-right: 10%;">提交时间：</span>
        <em>
          <span>{{seeObject.o}}</span>
          <span>{{seeObject.t}}</span>
        </em>
      </p>

      <p class="clearfix">
        <span style="margin-right: 10%;">检测机构：</span>
        <span>大厂全顺机动车检测有限公司</span>
      </p>
      <p class="clearfix">
        <span>详细地址：</span>
        <span>大厂县潮白河工业园区工业1路68号</span>
      </p>
    </div>

    <!-- 温馨提示 -->
    <div class="prompt">
      <p>温馨提示：</p>
      <p
        v-if="carInfo.payAmount === null"
      >您的到场检测业务已提交成功并已完成支付，有效期30天，请您尽快到场检测，以免耽误您的正常检车。到场后请您前往单据打印处打印年检所需单据。</p>
      <p v-else>
        您的预约检测业务已提交成功并已完成支付，请您按预约时间准时到场检测，以免耽误您的正常检车。到场后请您前往单据
        打印处打印年检所需单据。
      </p>
    </div>

    <!-- button -->
    <van-button color="#fd4b05" @click="submitClick">
      <span v-if="carInfo.payAmount === null">确认支付</span>
      <span v-else>返回首页</span>
    </van-button>
  </div>
</template>

<script>
/**
 *  支付共2个状态
 * 1.待支付
 * 2.支付成功
 * */

import { getDate } from '@/utils/index'
import { getLocal } from '@/utils/storage'
import wx from 'weixin-js-sdk'
import crypto from 'crypto'
export default {
  name: 'orderPay',
  data() {
    return {
      // 支付状态
      payState: false,
      carUser: JSON.parse(getLocal('userInfo')),
      carInfo: {},
      seeObject: {}
    }
  },
  created() {
    if (!this.$route.params.carInfo) {
      this.$router.push('/')
    } else {
      this.carInfo = this.$route.params.carInfo
      console.log(this.carInfo, 'this.carInfo')
    }
  },
  methods: {
    // 提交操作
    submitClick() {
      if (this.carInfo.payAmount === null) {
        this.wxPayBefore()
      } else {
        this.$router.push('/')
      }
    },
    // 车检数据查询
    async queryOrder() {
      let params = {
        userId: this.carUser.id,
        id: ''
      }
      let { data } = await this.$api.queryOrder(params)

      if (data && data.list.length !== 0) {
        this.orderList = data.list
      } else {
      }

      console.log(data, '------------------- 车检数据查询 ----------------')
    },
    // 支付接口
    async wxPayBefore() {
      let { data } = await this.$api.wxPayBefore({
        orderId: this.carInfo.id
      })

      this.wexinPay(
        data,
        //成功回调函数
        res => {
          this.$toast('支付成功')
          this.carInfo.payAmount = true
          this.seeObject = getDate(new Date().getTime(), 'year')
          console.log(res, '---成功回调函数----')
        },
        //取消回调函数
        res => {
          // this.$toast('您取消了支付')
          console.log(res, '----取消回调函数---')
        },
        //失败回调函数
        res => {
          // this.$toast('支付失败')
          console.log(res, '----失败回调函数---')
        }
      )
      console.log(data, '----------提交支付-----------')
    },

    // 调取微信支付
    wexinPay(data, cb, cancel, fail) {
      //获取后台传入的数据
      let appId = data.appId
      let timestamp = data.timeStamp
      let nonceStr = data.nonceStr
      let signature = data.signature
      let packages = data.package
      let paySign = data.paySign
      let signType = data.signType
      console.log('发起微信支付')
      //下面要发起微信支付了
      wx.config({
        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
        appId: appId, // 必填，公众号的唯一标识
        timestamp: timestamp, // 必填，生成签名的时间戳
        nonceStr: nonceStr, // 必填，生成签名的随机串
        signature: signature, // 必填，签名，见附录1
        jsApiList: ['chooseWXPay'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
      })
      wx.ready(function() {
        wx.chooseWXPay({
          timestamp: timestamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
          nonceStr: nonceStr, // 支付签名随机串，不长于 32 位
          package: packages, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=***）
          signType: signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
          paySign: paySign, // 支付签名
          success: function(res) {
            // 支付成功后的回调函数
            cb(res)
          },
          cancel: function(res) {
            // 取消支付
          },
          fail: function(res) {
            // 支付失败
            //失败回调函数
            errorCb(res)
          }
        })
      })
      wx.error(function(res) {
        // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
        /*alert("config信息验证失败");*/
      })
    },
    // 生成微信签名
    getSign(params, key) {
      const paramsArr = Object.keys(params)
      paramsArr.sort()
      const stringArr = []
      paramsArr.map(key => {
        stringArr.push(key + '=' + params[key])
      })
      // 最后加上 商户Key
      stringArr.push('key=' + key)
      const string = stringArr.join('&')

      return crypto
        .createHash('md5')
        .update(data)
        .digest('hex')
    }
  }
}
</script>

<style lang="less" scoped>
.pay-wrap {
  padding-bottom: 0.667rem;
  .pay-state {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0.667rem;
    div {
      display: inline-block;
      background-color: #fd4b05;
      border-radius: 50%;
      min-width: 2rem;
      min-height: 2rem;
      padding: 0.507rem;
      text-align: center;
      box-sizing: content-box;
      line-height: 1;
      white-space: nowrap;
      &:before {
        content: '';
        display: inline-block;
        vertical-align: middle;
        padding-top: 100%;
        height: 0;
      }
      & > span {
        display: inline-block;
        vertical-align: middle;
        font-size: 0.747rem;
        color: #fff;
      }
    }
  }
  .pay-text {
    padding: 0.667rem 0 0 0.693rem;
    p {
      font-size: 0.48rem;
      color: #000;
      margin-bottom: 0.533rem;
      em {
        float: left;
        width: 100%;
        font-weight: 400;
        span:nth-of-type(1) {
          width: auto;
          margin-right: 8%;
        }
      }
      span {
        float: left;
        line-height: 0.667rem;
      }
      span:nth-of-type(1) {
        width: 26%;
      }
      span:nth-of-type(2) {
        // width: 70%;
        hyphens: auto;
        word-wrap: break-word; /* old name */
        overflow-wrap: break-word;
        display: inline-block;
      }
    }
  }
  .prompt {
    padding: 0 0.533rem;
    p {
      font-size: 0.4rem;
      line-height: 0.667rem;
      color: #5a5f5d;
      letter-spacing: 0.027rem;
    }
  }

  .van-button {
    width: 90%;
    border-radius: 0.107rem;
    margin: 1.2rem auto 0;
    display: block;
    font-size: 0.56rem;
  }
}
</style>
